import 'package:flutter/material.dart';
import 'package:flutter_styled_toast/flutter_styled_toast.dart';
import 'package:get/get.dart';
import 'package:travel/routes/index.dart';
import 'package:travel/utils/colors.dart';
import 'package:travel/utils/styles.dart';
import 'package:travel/utils/tools.dart';
import 'package:travel/screen/flutter_screenutil.dart';

class VideoSearchController extends GetxController {
  RxList<String> history =
      RxList(['天安门', '南岳衡山', '希尔盾', '温泉酒店', '景山公园', '中山公园', '八达岭', '天坛', '王府井', '长安街', '西直门']);

  RxList<String> hot = RxList(['北海万豪文化酒店', '汤山温泉', '海城一品居', '万隆购物广场', '热门推荐三', '热门推荐四', '热门推荐五']);

  TextEditingController textEditingController = ToolsUtils.editingController('');

  @override
  void onClose() {
    textEditingController.dispose();
    super.onClose();
  }
}

class VideoSearchView extends GetView<VideoSearchController> {
  const VideoSearchView({super.key});

  @override
  Widget build(BuildContext context) {
    return Obx(() => Scaffold(
        backgroundColor: Colors.white,
        appBar: AppBar(
          automaticallyImplyLeading: true,
          leading: InkWell(
            onTap: Get.back,
            child: Icon(
              Icons.arrow_back_ios,
              color: ColorsUtils.parseColorFromHexString(ColorsUtils.color3333),
              size: 20.w,
            ),
          ),
          leadingWidth: 40.w,
          title: Container(
              height: 38.h,
              padding: EdgeInsets.only(left: 10.w, right: 15.w),
              decoration: BoxDecoration(
                  border:
                      Border.all(color: ColorsUtils.parseColorFromHexString(ColorsUtils.color3478)),
                  borderRadius: BorderRadius.all(const Radius.circular(20).w)),
              child: TextField(
                controller: controller.textEditingController,
                cursorWidth: 2.0,
                cursorRadius: const Radius.circular(2),
                cursorColor: ColorsUtils.parseColorFromHexString(ColorsUtils.color3333),
                style: StylesUtils.customTextStyle(fontSize: 15.sp, color: ColorsUtils.color3333),
                decoration: InputDecoration(
                  prefixIcon: Icon(Icons.search_sharp, size: 25.sp),
                  prefixIconColor: Colors.black54,
                  prefixIconConstraints: BoxConstraints.expand(width: 35.w),
                  border: InputBorder.none,
                  focusedBorder: InputBorder.none,
                  hintText: '搜索你想看的',
                  contentPadding: EdgeInsets.symmetric(vertical: 15.h),
                  isCollapsed: true,
                  isDense: true,
                  hintStyle: StylesUtils.customTextStyle(
                    color: ColorsUtils.color9999,
                  ),
                  suffixIcon: ToolsUtils.assetImageSvg('u595.svg', width: 18.w, height: 18.h),
                  suffixIconConstraints: BoxConstraints.expand(width: 18.w, height: 18.h),
                  constraints: BoxConstraints(maxHeight: 38.h),
                ),
              )),
          actions: [
            InkWell(
                onTap: () {
                  if (controller.textEditingController.text.isEmpty) {
                    showToast('请输入搜索内容',
                        context: context,
                        position: StyledToastPosition.center,
                        animation: StyledToastAnimation.slideToBottom,
                        reverseAnimation: StyledToastAnimation.sizeFade,
                        textStyle: StylesUtils.customTextStyle(fontSize: 14.sp),
                        duration: const Duration(seconds: 2));
                    return;
                  }
                },
                child: Container(
                  constraints: BoxConstraints.expand(width: 60.w, height: 38.h),
                  margin: EdgeInsets.only(left: 15.w, right: 10.w),
                  alignment: Alignment.center,
                  child:
                      Text('搜索', style: StylesUtils.customTextStyle(color: ColorsUtils.color3478)),
                ))
          ],
        ),
        body: SingleChildScrollView(
          padding: EdgeInsets.all(10.h),
          child: Column(
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text(
                    '历史搜索',
                    style: StylesUtils.customTextStyle(color: ColorsUtils.color3333),
                  ),
                  ToolsUtils.assetImageSvg('u1750.svg', width: 15.w, height: 15.h)
                ],
              ),
              Container(
                margin: EdgeInsets.only(top: 10.h),
                alignment: Alignment.centerLeft,
                child: Wrap(
                  direction: Axis.horizontal,
                  crossAxisAlignment: WrapCrossAlignment.center,
                  spacing: 5.w,
                  runSpacing: 10.w,
                  children: controller.history
                      .map((e) => InkWell(
                            onTap: () {
                              Get.toNamed(RoutePath.videoResult, arguments: {'result': e});
                            },
                            child: Chip(
                                backgroundColor:
                                    ColorsUtils.parseColorFromHexString(ColorsUtils.colorF2f2),
                                side: BorderSide.none,
                                shape: RoundedRectangleBorder(
                                    borderRadius: BorderRadius.circular(15.w)),
                                label: Text(
                                  e,
                                  style: StylesUtils.customTextStyle(
                                      color: ColorsUtils.color3333, fontSize: 13.sp),
                                )),
                          ))
                      .toList(),
                ),
              ),
              Container(
                margin: EdgeInsets.only(top: 10.h),
                alignment: Alignment.centerLeft,
                child: Text(
                  '热门推荐',
                  style: StylesUtils.customTextStyle(color: ColorsUtils.color3333),
                ),
              ),
              Container(
                margin: EdgeInsets.only(top: 10.h),
                alignment: Alignment.centerLeft,
                child: Wrap(
                  direction: Axis.horizontal,
                  crossAxisAlignment: WrapCrossAlignment.center,
                  spacing: 5.w,
                  runSpacing: 10.w,
                  children: hotWidget(),
                ),
              )
            ],
          ),
        )));
  }

  List<Widget> hotWidget() {
    return controller.hot
        .asMap()
        .map((index, e) => MapEntry(
            index,
            InkWell(
              onTap: () {
                Get.toNamed(RoutePath.videoResult, arguments: {'result': e});
              },
              child: Chip(
                label: Text(e),
                backgroundColor: index < 2
                    ? ColorsUtils.parseColorFromHexString(ColorsUtils.colorDfee)
                    : ColorsUtils.parseColorFromHexString(ColorsUtils.colorF2f2),
                side: BorderSide.none,
                shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(15.w)),
                labelStyle:
                    StylesUtils.customTextStyle(color: ColorsUtils.color3333, fontSize: 13.sp),
              ),
            )))
        .values
        .toList();
  }
}
